<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse value="0">
          <Panel>
            常规配置
            <div slot="content">
              <Form :label-width="80">
                <FormItemPanel title="边距">
                  <FormItem label="左">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="chartOption.grid.left"/>
                  </FormItem>
                  <FormItem label="上">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="chartOption.grid.top"/>
                  </FormItem>
                  <FormItem label="右">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="chartOption.grid.right"/>
                  </FormItem>
                  <FormItem label="下">
                    <InputNumber size="small" :max="1000" :min="-1000" v-model="chartOption.grid.bottom"/>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            数据项
            <div slot="content">
              <Form :label-width="80">
                <FormItem label="边框宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series.itemStyle.normal.borderWidth"/>
                </FormItem>
                <FormItem label="边框颜色">
                  <PnColorPicker size="small" v-model="chartOption.series.itemStyle.normal.borderColor" alpha recommend/>
                </FormItem>
                <FormItemPanel title="数据项强调（鼠标滑入）状态">
                  <FormItem label="阴影大小">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series.itemStyle.emphasis.shadowBlur"/>
                  </FormItem>
                  <FormItem label="阴影颜色">
                    <PnColorPicker size="small" v-model="chartOption.series.itemStyle.emphasis.shadowColor" alpha recommend/>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="标签">
                  <Collapse>
                    <Panel>
                      正常状态
                      <div slot="content">
                        <FormItem label="显示">
                          <i-switch v-model="chartOption.series.label.normal.show">
                            <span slot="open"></span>
                            <span slot="close"></span>
                          </i-switch>
                        </FormItem>
                        <FormItem label="字体颜色">
                          <PnColorPicker size="small" v-model="chartOption.series.label.normal.color" alpha recommend/>
                        </FormItem>
                        <FormItem label="字号">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series.label.normal.fontSize"/>
                        </FormItem>
                      </div>
                    </Panel>
                    <Panel>
                      强调状态
                      <div slot="content">
                        <FormItem label="显示">
                          <i-switch v-model="chartOption.series.label.emphasis.show">
                            <span slot="open"></span>
                            <span slot="close"></span>
                          </i-switch>
                        </FormItem>
                        <FormItem label="字体颜色">
                          <PnColorPicker size="small" v-model="chartOption.series.label.emphasis.color" alpha recommend/>
                        </FormItem>
                        <FormItem label="字号">
                          <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.series.label.emphasis.fontSize"/>
                        </FormItem>
                      </div>
                    </Panel>
                  </Collapse>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            x轴
            <div slot="content">
              <Form :label-width="80">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.xAxis.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="轴标签">
                  <FormItem label="字体大小">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.xAxis.axisLabel.fontSize"></InputNumber>
                  </FormItem>
                  <FormItem label="颜色">
                    <PnColorPicker size="small" v-model="chartOption.xAxis.axisLabel.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="字体粗细">
                    <Select :transfer="true" size="small" v-model="chartOption.xAxis.axisLabel.fontWeight">
                      <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                  <FormItem label="角度">
                    <Select :transfer="true" size="small" v-model="chartOption.xAxis.axisLabel.rotate">
                      <Option v-for="item in $PnChartDict.rotates" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="轴数据">
                  <Button class="float-right" size="small" type="primary" @click="addXAxisDataItem"><Icon type="md-add" /> 新增轴数据项</Button>
                  <div class="clearfix"></div>
                  <div class="m-b-10px"></div>
                  <Collapse accordion>
                    <Panel :name="$PnUtil.uuid()" v-for="(item, index) in chartOption.xAxis.data" :key="index">
                      {{item}}
                      <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteXAxisDataItem(index)"><Icon type="md-trash" /></a>
                      <div slot="content">
                        <Input size="small" v-model="chartOption.xAxis.data[index]"/>
                      </div>
                    </Panel>
                  </Collapse>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            y轴
            <div slot="content">
              <Form :label-width="80">
                <FormItem label="显示">
                  <i-switch v-model="chartOption.yAxis.show">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </FormItem>
                <FormItemPanel title="轴标签">
                  <FormItem label="字体大小">
                    <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.yAxis.axisLabel.fontSize"></InputNumber>
                  </FormItem>
                  <FormItem label="字体颜色">
                    <PnColorPicker size="small" v-model="chartOption.yAxis.axisLabel.color" alpha recommend/>
                  </FormItem>
                  <FormItem label="字体粗细">
                    <Select :transfer="true" size="small" v-model="chartOption.yAxis.axisLabel.fontWeight">
                      <Option v-for="item in $PnDict.fontWeights" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </FormItem>
                </FormItemPanel>
                <FormItemPanel title="轴数据">
                  <Button class="float-right" size="small" type="primary" @click="addYAxisDataItem"><Icon type="md-add" /> 新增轴数据项</Button>
                  <div class="clearfix"></div>
                  <div class="m-b-10px"></div>
                  <Collapse accordion>
                    <Panel :name="$PnUtil.uuid()" v-for="(item, index) in chartOption.yAxis.data" :key="index">
                      {{item}}
                      <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteYAxisDataItem(index)"><Icon type="md-trash" /></a>
                      <div slot="content">
                        <Input size="small" v-model="chartOption.yAxis.data[index]"/>
                      </div>
                    </Panel>
                  </Collapse>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel>
            视觉映射
            <div slot="content">
              <Form :label-width="80">
                <FormItem label="最小值">
                  <InputNumber size="small" :max="1000000" :min="-1000000" v-model="chartOption.visualMap.min"></InputNumber>
                </FormItem>
                <FormItem label="最大值">
                  <InputNumber size="small" :max="1000000" :min="-1000000" v-model="chartOption.visualMap.max"></InputNumber>
                </FormItem>
                <FormItemPanel title="色系">
                  <Alert style="padding-right: 10px; text-align: justify;">
                    可以通过添加自定义色系指定图表中数据从大到小所对应的颜色，一般只需要添加两个色值即可，图表会自动根据色值与数据值决定颜色的深浅来代表数据的权重。
                  </Alert>
                  <Button class="float-right" size="small" type="primary" @click="addVisualMapColor"><Icon type="md-add" /> 新增映射色值</Button>
                  <div class="clearfix"></div>
                  <div class="m-b-10px"></div>

                  <FormItem v-for="(item, index) in chartOption.visualMap.color" :key="index">
                    <PnColorPicker size="small" v-model="chartOption.visualMap.color[index]" alpha recommend/>
                    <a href="javascript:;" class="m-l-10px" style="color: #fff;" @click.stop="deleteVisualMapColor(index)"><Icon type="md-trash" /></a>
                  </FormItem>
                </FormItemPanel>
              </Form>
            </div>
          </Panel>
          <Panel v-if="chartOption.title">
            标题
            <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
            <div slot="content">
              <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
            </div>
          </Panel>
          <Panel>
            其他
            <div slot="content">
              <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
            </div>
          </Panel>
        </Collapse>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="ProportionHeadMapChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <InteractionSender :interactionKey="'itemClick'" :canAddFieldsMap="false"></InteractionSender>
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ProportionHeadMapChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      addXAxisDataItem () {
        this.chartOption.xAxis.data.push('新项目')
      },
      deleteXAxisDataItem (index) {
        this.chartOption.xAxis.data.splice(index, 1)
      },
      addYAxisDataItem () {
        this.chartOption.yAxis.data.push('新项目')
      },
      deleteYAxisDataItem (index) {
        this.chartOption.yAxis.data.splice(index, 1)
      },
      addVisualMapColor () {
        this.chartOption.visualMap.color.push('')
      },
      deleteVisualMapColor (index) {
        this.chartOption.visualMap.color.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
